CSS Media Queries এবং SVG Scaling

এসভিজি (SVG) ফাইলগুলি ওয়েব ডিজাইনে ব্যবহৃত ভেক্টর গ্রাফিক্সের জন্য অত্যন্ত জনপ্রিয়। এর সবচেয়ে বড় সুবিধা হল এটি স্কেলযোগ্য, অর্থাৎ আপনি যেকোনো আকারে এটি পরিবর্তন করতে পারেন এবং এর গুণগত মান ক্ষতিগ্রস্ত হয় না। এই বৈশিষ্ট্যটি এসভিজি ফাইলকে রেসপন্সিভ ডিজাইনের জন্য আদর্শ করে তোলে। CSS মিডিয়া কুয়েরি এবং এসভিজি স্কেলিং ব্যবহার করে ওয়েবসাইটে এসভিজি উপাদানগুলিকে বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শন করা যায়।

১. CSS মিডিয়া কুয়েরি ব্যবহার করে এসভিজি স্কেলিং

CSS মিডিয়া কুয়েরি ওয়েব পেজের উপাদানগুলির প্রদর্শনকে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করতে ব্যবহৃত হয়। আপনি মিডিয়া কুয়েরি ব্যবহার করে এসভিজি উপাদানগুলির সাইজ এবং অন্যান্য স্টাইলও পরিবর্তন করতে পারেন, যাতে ওয়েব পেজটি রেসপন্সিভ এবং সব ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।

উদাহরণ: এসভিজি স্কেলিং CSS মিডিয়া কুয়েরির মাধ্যমে

<svg xmlns="http://www.w3.org/2000/svg" class="responsive-svg">
  <circle cx="50%" cy="50%" r="40" stroke="black" stroke-width="3" fill="yellow" />
</svg>

<style>
  .responsive-svg {
    width: 100%;
    height: auto;
  }

  /* Media Query for larger screens */
  @media (min-width: 768px) {
    .responsive-svg {
      width: 80%;
    }
  }

  /* Media Query for extra large screens */
  @media (min-width: 1200px) {
    .responsive-svg {
      width: 60%;
    }
  }
</style>

এখানে:

• .responsive-svg ক্লাসের মাধ্যমে এসভিজি চিত্রটির width 100% নির্ধারণ করা হয়েছে, যাতে এটি কন্টেইনারের আকার অনুসারে স্কেল হয়।
• প্রথম মিডিয়া কুয়েরি (768px এর বড় স্ক্রীন) ক্ষেত্রে এসভিজি ফাইলটির সাইজ 80% করা হয়েছে।
• দ্বিতীয় মিডিয়া কুয়েরি (1200px এর বড় স্ক্রীন) ক্ষেত্রে সাইজ 60% করা হয়েছে।

এভাবে, এসভিজি ফাইলটি বিভিন্ন স্ক্রীন সাইজে অনুকূলভাবে স্কেল হবে।

২. SVG এবং viewBox এর মাধ্যমে স্কেলিং

এসভিজি ফাইলের মধ্যে viewBox অ্যাট্রিবিউট ব্যবহার করলে, চিত্রটি যে স্ক্রীনে প্রদর্শিত হচ্ছে তার আকার অনুসারে এটি স্বয়ংক্রিয়ভাবে স্কেল হয়ে যায়। এটি বিশেষভাবে রেসপন্সিভ ডিজাইনে অত্যন্ত কার্যকরী। viewBox এসভিজি চিত্রের প্রতিটি অংশের জন্য দৃশ্যমান এলাকা নির্ধারণ করে।

উদাহরণ: viewBox দিয়ে এসভিজি স্কেলিং

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="green" />
</svg>

এখানে:

• viewBox="0 0 200 200" অ্যাট্রিবিউটটি এসভিজি চিত্রের দৃশ্যমান অঞ্চলকে 200x200 ইউনিট নির্ধারণ করে।
• width="100%" height="100%" এর মাধ্যমে চিত্রটি প্যারেন্ট কন্টেইনারের আকার অনুযায়ী স্কেল হবে।
• viewBox অ্যাট্রিবিউটের মাধ্যমে চিত্রটি স্কেলযোগ্য, কারণ এটি প্রতিটি ডিভাইসে মানানসই আকারে প্রদর্শিত হবে।

৩. CSS Transformations (Scale) for SVG

CSS transform প্রপার্টি ব্যবহার করে এসভিজি উপাদানগুলির আকার পরিবর্তন (স্কেলিং) করা যায়। এটি সাধারণত একটি নির্দিষ্ট স্ক্রীন সাইজে উপাদানটির আকার নিয়ন্ত্রণ করতে ব্যবহার করা হয়।

উদাহরণ: CSS transform দিয়ে এসভিজি স্কেলিং

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="scale-svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="red" />
</svg>

<style>
  .scale-svg {
    transform: scale(1); /* Initial scale */
    transition: transform 0.5s ease; /* Smooth transition for scaling */
  }

  @media (min-width: 768px) {
    .scale-svg {
      transform: scale(1.5); /* Scale up when screen width is 768px or larger */
    }
  }

  @media (min-width: 1200px) {
    .scale-svg {
      transform: scale(2); /* Further scale up for larger screens */
    }
  }
</style>

এখানে:

• প্রথমে, transform: scale(1) ব্যবহার করে এসভিজি চিত্রটির আকার 100% রাখা হয়েছে।
• মিডিয়া কুয়েরি ব্যবহার করে বড় স্ক্রীনে (768px বা তার বেশি) চিত্রটির আকার 1.5x এবং আরও বড় স্ক্রীনে (1200px বা তার বেশি) 2x বৃদ্ধি করা হয়েছে।
• transition প্রপার্টি ব্যবহার করে স্কেলিং প্রক্রিয়াটিকে মসৃণ (smooth) করা হয়েছে।

৪. SVG with preserveAspectRatio for Responsive Scaling

preserveAspectRatio অ্যাট্রিবিউট ব্যবহার করে আপনি এসভিজি ফাইলের অঙ্গপ্রত্যঙ্গের অনুপাত ঠিক রাখতে পারেন যখন এটি স্কেল করা হয়। এটি একটি রেসপন্সিভ ডিজাইনে গুরুত্বপূর্ণ, যাতে এসভিজি চিত্রটির অনুপাত সঠিক থাকে।

উদাহরণ: preserveAspectRatio ব্যবহার করে স্কেলিং

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="4" fill="blue" />
</svg>

এখানে:

• preserveAspectRatio="xMidYMid meet" নির্দেশ করে যে এসভিজি চিত্রটি কেন্দ্রস্থল থেকে স্কেল হবে এবং তার আসল অঙ্গপ্রত্যাঙ্গের অনুপাত বজায় থাকবে।
• xMidYMid মানে চিত্রটি অনুভূমিক এবং উল্লম্বভাবে মাঝখানে রাখা হবে এবং meet এর মাধ্যমে চিত্রটি স্কেল হয়ে যাবে, কিন্তু এর আসল অনুপাত ঠিক থাকবে।

সারাংশ

এসভিজি (SVG) ফাইলগুলি স্বাভাবিকভাবেই স্কেলযোগ্য, কিন্তু CSS মিডিয়া কুয়েরি, viewBox, transform, এবং preserveAspectRatio ব্যবহার করে এগুলিকে আরও রেসপন্সিভ এবং স্কেলযোগ্য করে তোলা যায়। মিডিয়া কুয়েরি ব্যবহার করে আপনি এসভিজি উপাদানগুলির সাইজ এবং স্টাইল বিভিন্ন স্ক্রীন সাইজে কাস্টমাইজ করতে পারেন। viewBox এবং preserveAspectRatio এর মাধ্যমে এসভিজি চিত্রের অনুপাত বজায় রেখে স্কেল করা সম্ভব। CSS এর transform প্রপার্টি দিয়ে আপনি এসভিজি উপাদানের আকার পরিবর্তন করতে পারেন, যা রেসপন্সিভ ডিজাইনে সহায়ক।